<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 590px;
            height: 590px;
            border:5px solid;
            position: relative;
            margin:0 auto;
        }
        .container div{
            width: 180px;
            height: 180px;
            position: absolute;
            background: gray;
            color: white;
            font-size: 30px;
            text-align: center;
            line-height: 180px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="left: 10px; top:10px;">1</div>
        <div style="left: 34%; top:10px;">2</div>
        <div style="left: 66.66%; top:10px;">3</div>
        <div style="left: 10px; top:33.33%;">4</div>
        <div style="left: 34%; top:33.33%;">5</div>
        <div style="left: 66.66%; top:33.33%;">6</div>
        <div style="left: 10px; top:66.66%;">7</div>
        <div style="left: 34%; top:66.66%;">8</div>
        <div style="left: 66.66%; top:66.66%;">9</div>
    </div>
    <script>
        // 互换位置 
        /* 
        1.记录 开始拖拽元素的位置 
        2.获取最大面积的元素位置

        拖动结束的时候互换位置
        
        */
        var colorArr = ["black","red","blue","orange","pink","yellow","skyblue","green","yellowgreen"];
        var divs =  document.querySelectorAll(".container div");
        for(var i=0;i<divs.length;i++){
        //    console.log(  divs[i]);
            divs[i].style.backgroundColor = colorArr[i];
        }


        // 给每一个方块都绑定拖拽的事件。
        var startDragPos = {};  // 记录开始拖拽元素的位置
        var maxEle  = null;  // 用于存放最大面积的方块元素
        for(var i=0;i<divs.length;i++){
            divs[i].onmousedown = function(e){
                // 去掉过度
                this.style.transition = "none";
                // 开始拖拽，记录拖拽元素的位置
                startDragPos.left  = this.style.left; // 把开始拖拽的元素位置通过对象保存下来
                startDragPos.top = this.style.top;

                var x = e.clientX - this.offsetLeft;
                var y = e.clientY - this.offsetTop;
                // 当按下拖动的时候 那么 把这个被拖动的元素 放在最上层；
                this.style.zIndex = 10;
                // console.log(x,y);
                this.onmousemove = function(e){
                    var xx = e.clientX;
                    var yy = e.clientY;
                    var crashArr = [];
                    // x  = e.clientX - this.offsetLeft
                    // xx -(e.clientX - this.offsetLeft)
                    // 需要和其他的元素 检测碰撞
                    // this就是拖拽的元素 ，this 和其他的8个方块是否碰撞了。
                    // console.log(this);
                    // 循环9个方块 去掉this。 分别检测 和this是否碰撞了
                    for(var j=0;j<divs.length;j++){
                        // console.log(divs[j]);
                        if(divs[j]!==this){  // 循环的元素 除了 当前拖拽元素之外的其他元素
                            // 除了拖拽之外的剩余的8个元素 。
                            // 检测this 和 其他8个元素之间是否碰撞了？
                            if(isCrash(this,divs[j])){
                                console.log("和其他8个元素碰了");
                                crashArr.push(divs[j]); // 收集碰撞的元素
                            }
                        }
                    }
                    // console.log(crashArr);
                    var maxArae = 0; // 假设最大面积为0，如果有面积比这个面积大就替换掉这个面积
                   
                    for(var k=0;k<crashArr.length;k++){
                        // 计算的面积是 crashArr[k] 和 this的碰撞面积
                        // crashArr[k]
                        var w  = this.offsetWidth - Math.abs(this.offsetLeft-crashArr[k].offsetLeft);// 计算碰撞的宽

                        var h = this.offsetHeight - Math.abs(this.offsetTop-crashArr[k].offsetTop); // 计算碰撞的高

                        var arae = w * h ;
                        if(arae>maxArae){ // 获取最大的碰撞面积
                            maxArae = arae;
                            maxEle = crashArr[k];  // 获取面积最大的碰撞元素
                        }
                    }
                    // console.log("??",maxEle); // 最大面积的元素


                    this.style.left = xx - x + "px";
                    this.style.top = yy - y + "px";
                }
            }
            divs[i].onmouseup = function(){
                console.log(startDragPos);  // 开始拖拽的位置 
                console.log(maxEle); // 碰撞面积最大的元素；
                this.style.transition = "all 1s";
                maxEle.style.transition = "all 1s";
                this.style.left = maxEle.style.left;  // 把拖拽元素移动到碰撞最大面积元素的位置上去
                this.style.top = maxEle.style.top;

                // 把最大碰撞面积元素移动到开始拖拽元素的位置
                maxEle.style.left = startDragPos.left;
                maxEle.style.top = startDragPos.top;


                // 拖动结束了 
                this.style.zIndex = 0;
                this.onmousemove = null;
            }
        }


// input/output

        // 封装一个检测是否碰撞的函数
        function isCrash(box1Ele,box2Ele){
             // A 的x轴上大边和小边 
                var AminX = box1Ele.offsetLeft;
                var AmaxX = box1Ele.offsetLeft + box1Ele.offsetWidth;
                // B的x轴的大边和小边
                var BminX = box2Ele.offsetLeft;
                var BmaxX = box2Ele.offsetLeft + box2Ele.offsetWidth;
                // A的y轴的大边和小边 
                var AminY = box1Ele.offsetTop;
                var AmaxY = box1Ele.offsetTop + box1Ele.offsetHeight;
                // B的y轴上的大边和小边
                var BminY = box2Ele.offsetTop;
                var BmaxY = box2Ele.offsetTop + box2Ele.offsetHeight;
                // 如果A 和 B 碰了 那么就满足 
                if (AmaxX > BminX && AminX < BmaxX && AmaxY > BminY && AminY < BmaxY) {
                    // console.log("x轴上碰撞了!!");
                    return true;  // 碰了
                }else{
                    // 没有碰撞
                    return false;
                }
        }


// 作业：方块拖动时候  给边界限定 。
// 上、下、左、右 需要加上 边界的限定。不能拖出去了。

    </script>
</body>
</html>

